@keyframes leftCardAnimation {
  45%{
    transform: rotate(355deg);
  }

  50% {
    transform: rotate(352deg);
  }

  55%{
    transform: rotate(355deg);
  }

  60% {
    transform: rotate(352deg);
  }

  65%{
    transform: rotate(355deg);
  }

  70% {
    transform: rotate(352deg);
  }

  75%{
    transform: rotate(355deg);
  }
}

@keyframes rightCardAnimation {
  45%{
    transform: rotate(8deg);
  }

  50% {
    transform: rotate(11deg);
  }

  55%{
    transform: rotate(8deg);
  }

  60% {
    transform: rotate(11deg);
  }

  65%{
    transform: rotate(8deg);
  }

  70% {
    transform: rotate(11deg);
  }

  75%{
    transform: rotate(8deg);
  }
}

.CardRoot {
  position: relative;
}

.BackCard {
  position: absolute;
  height: 34vh;
  transform-origin: bottom;

  @media (min-width: 800px) {
    height: 48vh;
  }
}

.Left {
  top: -1vh;
  left: -15%;
  margin: 0 auto;
  transform: rotate(355deg);

}

.Right {
  top: -0vh;
  left: 8%;
  margin: 0 auto;
  transform: rotate(8deg);
}

.Left.Animated {
  animation: 6s ease-in 0s infinite leftCardAnimation;
}

.Right.Animated {
  animation: 6s ease-in 0s infinite rightCardAnimation;
}

.Card {
  height: 100%;
}

.Container {
  background-color: transparent;
  height: 34vh;
  width: 22vh;
  margin: 0 auto;
  padding: 0;
  perspective: 1000px;

  
  @media (min-width: 800px) {
    height: 48vh;
    width: 24vh;
  }
}

.SecondContainer {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.Container.opened .SecondContainer {
  transform: rotateY(180deg);
}

.Front, .Back {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.Front {
  transform-origin: 0% 50%;
}

.Back {
  transform-origin: 50% 50%;
  color: white;
  transform: rotateY(180deg);
}